<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>知乎数据采集系统首页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: flex-start;
            height: 100vh;
            overflow-x: hidden;
        }

        .navbar {
            width: 250px;
            height: 100%;
            background-color: #2c3e50;
            color: white;
            transition: all 0.3s ease;
            position: fixed;
            z-index: 1000;
            overflow-y: auto;
        }

        .navbar.collapsed {
            width: 60px;
        }

        .navbar .logo {
            display: flex;
            align-items: center;
            padding: 20px;
            cursor: pointer;
        }

        .navbar .logo img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        .navbar .logo span {
            display: inline-block;
            font-size: 18px;
            font-weight: bold;
        }

        .navbar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .navbar li {
            position: relative;
        }

        .navbar li a {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            text-decoration: none;
            color: white;
            transition: background-color 0.3s;
        }

        .navbar li a i {
            margin-right: 10px;
        }

        .navbar li a span {
            display: inline-block;
            font-size: 16px;
        }

        .navbar li a:hover {
            background-color: #34495e;
        }

        .navbar.collapsed li a span {
            display: none;
        }

        .navbar .toggle-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            color: white;
        }

        .navbar .toggle-btn i {
            font-size: 20px;
        }

        input[type="checkbox"] {
            display: none;
        }

        input[type="checkbox"]:checked + .navbar {
            width: 60px;
        }

        input[type="checkbox"]:checked + .navbar .logo span {
            display: none;
        }

        input[type="checkbox"]:checked + .navbar li a span {
            display: none;
        }

        @media (max-width: 768px) {
            .navbar {
                width: 60px;
            }
            .navbar .logo span,
            .navbar li a span {
                display: none;
            }
        }
    </style>
</head>
<body>
    <input type="checkbox" id="checkbox">
    <label for="checkbox" class="toggle-btn">
        <i class="fa fa-bars" aria-hidden="true"></i>
    </label>
    <div class="navbar">
        <div class="logo">
            <img src="./images/1.png" alt="Logo">
            <span>知乎数据采集系统</span>
        </div>
        <ul>
            <li>
                <a href="/User.html">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    <span>提问者个人信息</span>
                </a>
            </li>
            <li>
                <a href="/Question.html">
                    <i class="fa fa-sitemap" aria-hidden="true"></i>
                    <span>问题内容</span>
                </a>
            </li>
            <li>
                <a href="/test.html">
                    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                    <span>回答内容</span>
                </a>
            </li>
            <li>
                <a href="/AnalysisChart.html">
                    <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                    <span>点赞分析图</span>
                </a>
            </li>
            <li>
                <a href="/CommentChart.html">
                    <i class="fa fa-th-large" aria-hidden="true"></i>
                    <span>评论分析图</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-th-large" aria-hidden="true"></i>
                    <span>内容分析图</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-th-large" aria-hidden="true"></i>
                    <span>内容词云图</span>
                </a>
            </li>
        </ul>
    </div>
</body>


</html>